程序员练级攻略：前端基础和底层原理-[2026重制版]

// 经典面试题：输出顺序？
console.log('1 - 同步');

setTimeout(() => console.log('2 - setTimeout'), 0);

Promise.resolve().then(() => console.log('3 - Promise'));

console.log('4 - 同步');

// 输出: 1, 4, 3, 2
// 解释: 同步(1,4) → 微任务(Promise 3) → 宏任务(setTimeout 2)

// 常见内存泄漏场景

// ❌ 1. 意外的全局变量
function leak1() {
    leaked = "I'm global!";  // 没有 var/let/const
}

// ❌ 2. 闭包引用
function leak2() {
    const bigData = new Array(1000000).fill('*');
    return function() {
        // 闭包保持对 bigData 的引用，无法释放
        return bigData.length;
    };
}

// ❌ 3. 被遗忘的定时器
function leak3() {
    const data = new Array(1000000).fill('*');
    setInterval(() => {
        console.log(data.length);  // data 无法被GC
    }, 1000);
}

// ✅ 正确做法：手动清理
function goodPractice() {
    const data = new Array(1000000).fill('*');
    const timer = setInterval(() => { /* ... */ }, 1000);
    
    return () => {
        clearInterval(timer);  // 清理定时器
        data = null;          // 解除引用
    };
}

// 1. NoInfer<T> - 禁止泛型参数推断
function createArray<T>(length: number, value: NoInfer<T>): T[] {
    return Array.from({ length }, () => value);
}
// createArray(3, 'hello') 推断为 string[], 而非 'hello'[]

// 2. 模板字面量类型 (Template Literal Types)
type Color = `#${string}`;  // 匹配所有 # 开头的字符串

// 3. satisfies 操作符 - 类型约束但不改变类型
type RecordKeys = keyof Record<string, unknown>;
const config = {
    api: 'https://api.example.com',
    timeout: 5000,
} satisfies RecordKeys;
// config 保持原始类型，但检查是否满足 RecordKeys

// 4. 条件类型增强
interface Cart {
    items: Product[];
    checkout(): void;
}
type CartKey = keyof Cart;  // 'items' | 'checkout'

// app/users/[id]/page.tsx
import { Metadata } from 'next';
import { getUser } from '@/lib/data';

// 服务端组件（默认）
export async function generateMetadata({ params }): Promise<Metadata> {
    const user = await getUser(params.id);
    return { title: `${user.name} - 用户详情` };
}

export default async function UserProfile({ params }) {
    const user = await getUser(params.id);

    return (
        <main className="max-w-4xl mx-auto py-8">
            <h1 className="text-3xl font-bold">{user.name}</h1>
            
            {/* Client Component 用于交互 */}
            <FollowButton userId={params.id} />
            
            <section className="mt-6">
                <h2>用户信息</h2>
                <pre>{JSON.stringify(user, null, 2)}</pre>
            </section>
        </main>
    );
}

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import path from 'path';

export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src'),
        },
    },
    server: {
        port: 3000,
        proxy: {
            '/api': {
                target: 'http://localhost:8080',
                changeOrigin: true,
            },
        },
    },
    build: {
        target: 'es2022',
        sourcemap: true,
        rollupOptions: {
            output: {
                manualChunks: {
                    vendor: ['react', 'react-dom'],
                    utils: ['lodash', 'dayjs'],
                },
            },
        },
    },
});